<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="JQuery/jquery-1.11.1.js"></script>
<script type="text/javascript">
//创建XMLHttpRequest异步对象函数
function createxmlHttpRequest() {
	try {
		return new XMLHttpRequest();  //支持大多数浏览器
	} catch (e) {
		try {
			 return  new ActiveXObject("Msxml2.XMLHTTP");     //支持IE6.0版本
		} catch (e) {
			try {
				return  new ActiveXObject("Microsoft.XMLHTTP");  //支持IE5.5及以下版本
			} catch (e) {
				throw e;
			}
		}
	}
}
/*
 * 1、在文档加载完毕时发送请求，得到所有省份的名称，显示在<select name="province"/>中
   2、在选择了新的省份时，发送请求(参数为省名称)，得到xml文档，即<province>元素
      解析xml文档，得到其中所有的<city>,再得到每个<city>元素的内容，即市名，使用市名生成<option>，插入到<select name="city"/>中
 */
window.onload = function() {   //文档加载完毕后执行
		/*
		  ajax四步操作，得到服务器的响应，把响应结果显示到h1元素中
		*/
		//1、得到异步对象
		var xmlHttp = createxmlHttpRequest();
	    //2、打开与服务器的连接
    	xmlHttp.open("GET","/ajax/ProvinceServelt",true);
    	//3、发送请求
    	xmlHttp.send(null);  //GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！
    	//4、给异步对象的onreadystatechange对象注册监听器
    	xmlHttp.onreadystatechange = function() {   //当xmlHttp的状态发送变化时执行
    		//双重判断：xmlHttp的状态为4(服务器响应结束)，以及服务器响应的状态码为200(响应成功)
    		if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
    			//获取服务器的响应结果(xml)
    			var text = xmlHttp.responseText;
    			//使用逗号分隔，得到数组
    			var arr  = text.split(",");
    			//循环遍历每个省份名称，每个名称生成一个option对象，添加到<select> 中
    			for(var i = 0; i < arr.length; i++) {
    				 var op = document.createElement("option");  //创建一个指定名称元素
    				 op.value = arr[i];   //设置op的实际值为当前省份的名称
    				 var textNode = document.createTextNode(arr[i]);  //创建文本节点
    				 op.appendChild(textNode);    //把文本子节点添加到op元素中，指定其显示值
                     document.getElementById("p").appendChild(op);
    			}
    		}
    	};
    	
    	/*
	    	第二件事：给<select name="province">添加改变监听
	    	使用选择的省份名称请求CityServelt,得到<province>元素(xml元素)
	    	获取<province>元素中所有的<city>元素，遍历之，获取每个<city>的文本内容，即市名称
	    	使用每个市名称创建<option>元素添加到<select name="city">
    	*/
    	var proSelect = document.getElementById("p");
    	proSelect.onchange = function() {
    		var xmlHttp = createxmlHttpRequest();
    		xmlHttp.open("POST","/ajax/CityServelt",true);
    		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    		xmlHttp.send("pname=" + proSelect.value);  //把下拉列表中选择的值发送给服务器
    		xmlHttp.onreadystatechange = function() {
    			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
    				/*
    				  把select中的所有option移除(除了请选择)
    				*/
    				var citySelect = document.getElementById("c");
    				//获取其所有的子元素
    				var cityOptions = citySelect.getElementsByTagName("option");
    				//循环遍历删除
    				while(cityOptions.length > 1) {
    					citySelect.removeChild(cityOptions[1]);   //总是删除第一个，因为1删除了，2就变为第一个了
    				}
    				
    				var doc = xmlHttp.responseXML;
    				//得到所有名为city的元素
    				var cityEleList = doc.getElementsByTagName("city");
    				//循环遍历每个city元素
    				for(var i = 0; i < cityEleList.length; i++) {
    					var cityEle = cityEleList[i];  //得到每个City元素
    					
    					var cityName;
	    				if(window.addEventListener) {  //处理浏览器差异
	    					cityName = cityEle.textContent;   //支持火狐等其他浏览器
	        			} else {
	        				cityName = cityEle.text;    //支持IE
	        			} 
	    				//使用市名称创建option元素，添加到<select name="city">中 
    					var cityoption = document.createElement("option");
    					cityoption.value = cityName;
    					//创建文本节点
    					var cityText = document.createTextNode(cityName);
    					cityoption.appendChild(cityText);  //把文本节点追加到cityoption元素中
    					//把cityoption添加到<select>元素中
    					citySelect.appendChild(cityoption);
    				}
    				citySelect[1].selected = true;
    			}
    		};
    	};
};
</script>
</head>
<body>
  <h1>省市联动案例</h1>
  <select name="province" id="p">
      <option>=== 请选择省 ===</option>
  </select>
     
  <select name="city" id="c">
      <option>=== 请选择市 ===</option>
  </select>
</body>
</html>